<template>
  <div class="main">
    <div class="container">
      <div class="container-left">
        <div class="container-top">
          <div class="top">
            <div class="title">项目申报中心</div>
          </div>
          <div class="contentTitle">
            <p>{{ contentList.project_name }}</p>
          </div>
        </div>
        <div class="content">
          <div class="item">
            <p>课程名称</p>
            <p class="item-content">{{ contentList.declare_name }}</p>
          </div>
          <div class="item">
            <p>课程负责人</p>
            <p>
              <span v-for="(item, index) in principalData" :key="index"
                >{{ item.real_name }}&nbsp;</span
              >
              <span class="chakan" @click="centerDialogVisible = true"
                >查看基础资料</span
              >
            </p>
          </div>
          <div class="item">
            <p>课程团队主要成员</p>
            <p>
              <span v-for="(item, index) in membersData" :key="index"
                >{{ item.real_name }}&nbsp;</span
              >
              <span class="chakan" @click="membersDialogVisible = true"
                >查看基础资料</span
              >
            </p>
          </div>
          <div class="item situation">
            <p>项目内容</p>
            <p class="item-content">
              {{ contentList.describe }}
            </p>
          </div>
          <div
            class="item"
            v-for="(item, index) in contentList.meta"
            :key="index"
          >
            <p>{{ item.field_name }}</p>
            <p v-if="item.fields_value.indexOf('http') != -1">
              <a :href="ele" v-for="ele in item.fields_value.split(' ')">{{
                ele
              }}</a>
            </p>
            <p v-else class="item-content">{{ item.fields_value }}</p>
          </div>
          <div class="item file">
            <p>申报附件</p>
            <div>
              <div
                class="file-item"
                v-for="(ele, idx) in contentList.attach"
                :key="idx"
              >
                <p>附件名字：{{ ele.attach_name }}</p>
                <div class="preview">
                  <div class="img">
                    <img
                      :src="
                        ele.type === '1'
                          ? require('../../../assets/images/file.png')
                          : ele.type === '2'
                          ? require('../../../assets/images/vedio.png')
                          : ele.type === '3'
                          ? require('../../../assets/images/zip.png')
                          : require('../../../assets/images/pic.png')
                      "
                      alt=""
                    />
                  </div>
                  <div class="details">
                    <p class="title">{{ ele.attach_name }}</p>
                    <p>
                      <span>{{
                        (ele.attach_size / 1024 / 1024).toFixed(2) + "M"
                      }}</span
                      ><span>{{
                        ele.type === "1"
                          ? "文档文件"
                          : ele.type === "2"
                          ? "视频文件"
                          : ele.type === "3"
                          ? "压缩文件"
                          : "图片文件"
                      }}</span>
                    </p>
                  </div>
                  <div class="preview-btn">
                    <div
                      v-if="ele.type != '3'"
                      class="look"
                      @click="handlePreview(ele.attach_id, ele.type)"
                    >
                      <img src="@/assets/images/look.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <p>状态</p>
            <p class="item-content">{{ contentList.status_show }}</p>
          </div>
          <div class="item" v-if="contentList.status === '9'">
            <p>退回原因</p>
            <p class="item-content">{{ contentList.remark }}</p>
          </div>
          <div class="footer">
            <el-button icon="iconfont icon-guanbi" class="close" @click="back()"
              >关闭</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="课程团队负责人"
      :visible.sync="centerDialogVisible"
      width="60%"
      :show-close="false"
      custom-class="table"
      center
    >
      <el-table :data="principalData" border style="width: 100%">
        <el-table-column label="序号" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="real_name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="phone" label="联系方式"> </el-table-column>
        <el-table-column prop="yuanxi" label="院系"> </el-table-column>
        <el-table-column prop="zhiwu" label="职务"> </el-table-column>
        <el-table-column prop="zhicheng" label="职称"> </el-table-column>
        <el-table-column prop="renwu" label="承担任务"> </el-table-column>
      </el-table>
      <div class="dialog-footer">
        <el-button
          icon="iconfont icon-guanbi"
          class="close"
          @click="centerDialogVisible = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="课程团队主要成员"
      :visible.sync="membersDialogVisible"
      width="60%"
      :show-close="false"
      custom-class="table"
      center
    >
      <el-table :data="membersData" border style="width: 100%">
        <el-table-column label="序号" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="real_name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="phone" label="联系方式"> </el-table-column>
        <el-table-column prop="yuanxi" label="院系"> </el-table-column>
        <el-table-column prop="zhiwu" label="职务"> </el-table-column>
        <el-table-column prop="zhicheng" label="职称"> </el-table-column>
        <el-table-column prop="renwu" label="承担任务"> </el-table-column>
      </el-table>
      <div class="dialog-footer">
        <el-button
          icon="iconfont icon-guanbi"
          class="close"
          @click="membersDialogVisible = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <template v-if="FiledialogVisible">
      <el-dialog
        v-dialogDrag
        title="预览"
        :visible.sync="FiledialogVisible"
        width="80%"
        custom-class="filePreview"
        :fullscreen="FileScreen"
        :before-close="FilehandleClose"
      >
        <i class="el-icon-rank" @click="onFileFullScreen"></i>
        <div class="mask"></div>
        <iframe
          :src="
            'http://sapi.ps.cqooc.com/unit/attach/playurl?attach_id=' +
            attachId +
            '&token=' +
            token
          "
          frameborder="0"
          style="width: 100%; height: 100%"
        >
        </iframe>
      </el-dialog>
    </template>
    <template v-if="VideodialogVisible">
      <el-dialog
        v-dialogDrag
        title="预览"
        :visible.sync="VideodialogVisible"
        width="80%"
        custom-class="filePreview"
        :fullscreen="VideoScreen"
        :before-close="VideohandleClose"
      >
        <i class="el-icon-rank" @click="onVideoFullScreen"></i>
        <video
          :src="
            'http://sapi.ps.cqooc.com/unit/attach/playurl?attach_id=' +
            attachId +
            '&token=' +
            token
          "
          controls="controls"
        ></video>
        <!-- <iframe :src="
          'http://sapi.ps.cqooc.com/unit/attach/playurl?attach_id=' +
          attachId +
          '&token=' +
          token
        " 
        frameborder="0" 
        style="width: 100%; height: 100%">
        </iframe> -->
      </el-dialog>
    </template>
    <template v-if="PicdialogVisible">
      <el-dialog
        v-dialogDrag
        title="预览"
        :visible.sync="PicdialogVisible"
        width="80%"
        custom-class="filePreview"
        :fullscreen="PicScreen"
        :before-close="PichandleClose"
      >
        <i class="el-icon-rank" @click="onPicFullScreen"></i>
        <img
          width="100%"
          :src="
            'http://sapi.ps.cqooc.com/unit/attach/playurl?attach_id=' +
            attachId +
            '&token=' +
            token
          "
          alt=""
        />
      </el-dialog>
    </template>
  </div>
</template>
<script>
import pdf from "vue-pdf";
import { UserDeclareDetails } from "@/api/login";
export default {
  name: "ShenBaoDetails",
  data() {
    return {
      principalData: [],
      membersData: [],
      centerDialogVisible: false,
      membersDialogVisible: false,
      // 文件预览
      FileYulan: false,
      FileScreen: false,
      VideoScreen: false,
      PicScreen: false,
      currentPage: 1,
      pageCount: 0,
      contentList: "",
      FiledialogVisible: false,
      VideodialogVisible: false,
      PicdialogVisible: false,
      // 背景
      Showbg: false,
      // 课程id
      declareid: "",
      projectid: "",
      // 播放器
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", // 类型
            src: "https://v-cdn.zjol.com.cn/280443.mp4", // url地址
          },
        ],
        poster: "", // 封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
      },
      // 自定义
      metaList: "",
      token: "",
      type: "1",
      attachId: "",
    };
  },
  components: {
    pdf: pdf,
  },
  methods: {
    handlePreview(attach_id, type) {
      this.attachId = attach_id;
      if (type === "1") {
        this.FiledialogVisible = true;
      } else if (type === "2") {
        this.VideodialogVisible = true;
      } else {
        this.PicdialogVisible = true;
      }
    },
    FilehandleClose() {
      this.FiledialogVisible = false;
    },
    VideohandleClose() {
      this.VideodialogVisible = false;
    },
    PichandleClose() {
      this.PicdialogVisible = false;
    },
    onFileFullScreen() {
      this.FileScreen = !this.FileScreen;
    },
    onVideoFullScreen() {
      this.VideoScreen = !this.VideoScreen;
    },
    onPicFullScreen() {
      this.PicScreen = !this.PicScreen;
    },
    prePage() {
      if (this.currentPage <= 1) return;
      this.currentPage -= 1;
    },
    nextPage() {
      if (this.currentPage >= this.pageCount) return;
      this.currentPage += 1;
    },
    loadPdfHandler(e) {
      console.log(e);
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    principalFunction(value) {
      this.centerDialogVisible = false;
    },
    membersFunction(value) {
      this.membersDialogVisible = false;
    },
    tableFunction(value) {
      this.tableDialogVisible = false;
    },
    // 获取项目详情
    queryUserDeclareDetails() {
      UserDeclareDetails({
        token: this.token,
        declare_id: this.declareid,
      }).then((result) => {
        const { data } = result;
        this.contentList = data;
        data.teamers.forEach((item) => {
          if (item.type_id === "1") {
            this.principalData.push(item);
          } else {
            this.membersData.push(item);
          }
        });
        if (result.msg === "数据不存在") {
          this.$router.push({
            path: "/dataError",
          });
        } else if (result.msg === "项目已过期") {
          this.$router.push({
            path: "/overdueError",
          });
        }
        if (result.code === -1) {
          this.$router.push({
            path: "/rootError",
          });
        }
      });
    },
    back() {
      this.$router.go(-1);
    },
    backgroundShow() {
      this.$emit("backgroundShow", this.Showbg);
    },
  },
  created() {
    this.backgroundShow();
  },
  mounted() {
    const token = sessionStorage.getItem("token");
    const declareid = this.$route.query.declareid;
    const projectid = this.$route.query.projectid;
    this.token = token;
    this.declareid = declareid;
    this.projectid = projectid;
    this.queryUserDeclareDetails();
  },
};
</script>
<style lang='scss' scoped>
img {
  width: 100%;
  height: 100%;
}
.main {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  color: #242748;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  margin: 0 50px 20px 30px;
  text-align: left;
  font-family: "PingFang";
  .container {
    height: 960px;
    & > div {
      width: 100%;
      background-color: #fff;
      border-radius: 5px;
    }
    .container-right {
      height: auto;
    }
    .preview {
      width: 50% !important;
      .details {
        width: 82% !important;
      }
    }
  }
  .container-top {
    .top {
      display: flex;
      margin-bottom: 30px;
      .title {
        font-size: 26px;
        font-family: "黑体";
        color: #5673ff;
        margin-right: 60px;
      }
      .column {
        display: flex;
        font-size: 16px;
        .item {
          display: flex;
          align-items: center;
          padding-right: 50px;
          cursor: pointer;
          img {
            width: 15px;
            height: 15px;
            margin-right: 12px;
          }
        }
        /deep/.el-badge__content.is-fixed.is-dot {
          left: 2px;
          top: 5px;
        }
      }
    }
    .contentTitle {
      font-size: 22px;
      color: #242748;
      line-height: 32px;
      font-weight: 700;
      p {
        font-weight: 700;
      }
    }
  }
  .container-top {
    padding: 33px 45px 25px;
    border-bottom: solid 1px #e7e9eb;
  }
  /deep/.close {
    border: solid 1px #e7e9eb;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.14);
    color: #242748;
  }
  /deep/.el-button {
    width: 100px;
    height: 35px;
    line-height: 35px;
    padding: 0;
    i {
      margin-right: 8px;
      vertical-align: bottom;
    }
  }
  .content {
    padding: 40px;
    height: 820px;
    overflow-y: auto;
    font-size: 18px;
    .item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 60px;
      p {
        font-weight: 700;
        a {
          margin-right: 30px;
          color: blue;
          text-decoration: underline;
          word-wrap: break-word;
        }
      }
      .chakan {
        display: inline-block;
        font-size: 12px;
        padding: 6px 12px;
        margin-left: 30px;
        color: #fff;
        vertical-align: middle;
        border-radius: 5px;
        background-color: #69a1ff;
        border: solid 1px #4d8df7;
      }
      & > p:first-child {
        width: 170px;
        line-height: 30px;
      }
      & > p:nth-child(2),
      & > div {
        width: calc(100% - 250px);
      }
      .item-content {
        line-height: 30px;
      }
      &:last-of-type {
        margin-bottom: 0;
      }
      .file-item {
        margin-bottom: 30px;
        &:last-of-type {
          margin-bottom: 0;
        }
      }
      .commitment {
        border-radius: 5px;
        font-size: 18px;
        color: #242748;
        & > div {
          display: flex;
          p,
          span {
            font-weight: 700;
          }
        }
        .signature {
          display: flex;
          margin-right: 120px;
          button {
            margin-right: 20px;
          }
        }
        .esigns {
          width: 240px;
          height: 135px;
          background-color: #f1f3fd;
          & > img {
            width: 100% !important;
            height: 98% !important;
          }
        }
      }
    }
    .commitment-item {
      width: 80%;
      p {
        width: 100% !important;
      }
    }
    .situation {
      & > p {
        line-height: 30px;
      }
    }
    .file {
      margin-bottom: 40px;
    }
    .preview {
      display: flex;
      align-items: center;
      width: 85%;
      margin: 20px 0 15px;
      padding: 20px 22px;
      background-color: #f4f7fc;
      border-radius: 5px;
      .img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
        img {
          border-radius: 2px;
        }
      }
      .details {
        width: 75%;
        margin: 0 0 0 20px;
        .title {
          width: 90%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #242748;
          font-size: 14px;
          font-weight: 700;
        }
        p {
          line-height: 22px;
          font-size: 12px;
          color: #a1a4b5;
          span {
            margin-right: 10px;
          }
        }
      }
      .preview-btn {
        & > div {
          float: left;
          width: 18px;
          height: 18px;
          margin-left: 18px;
        }
        .del {
          width: 16px;
        }
      }
    }
    .middle {
      height: 40px;
    }
  }
  .container-right {
    table {
      width: 100%;
    }
    table td,
    th {
      border: solid 1px #ccc;
      padding: 15px;
      line-height: 35px;
      font-weight: 700;
    }
    table th:first-child {
      width: 17%;
      letter-spacing: 2px;
    }
    table th:last-child {
      width: 10%;
    }
    td {
      color: #76818f;
      text-align: justify;
      /deep/.el-form-item {
        height: 100%;
      }
      /deep/.el-form-item__content {
        height: 100%;
      }
      /deep/.el-textarea {
        height: 100%;
      }
      /deep/.el-textarea__inner {
        width: 100%;
        height: 100%;
        background-color: #f4f7fc;
        padding: 10px 18px;
        border-radius: 5px;
        color: #242748;
        font-size: 18px;
        font-family: "PingFang";
        border: none;
        resize: none;
        outline: none;
        &::placeholder {
          color: #242748;
          font-size: 18px;
          font-family: "PingFang";
        }
      }
      /deep/.el-form-item {
        margin-bottom: 0;
      }
    }
    .pingyu {
      height: 210px;
    }
    /deep/.el-radio__inner {
      width: 20px;
      height: 20px;
    }
    /deep/.el-radio__input.is-checked .el-radio__inner {
      border-color: #6b84fb;
      background: none;
    }
    /deep/.el-radio__inner::after {
      width: 15px;
      height: 15px;
      background-color: #6b84fb;
    }
    /deep/.el-radio__label {
      font-size: 18px;
      color: #828b98;
      font-weight: 700;
    }
    th {
      span {
        color: #6a82fd;
        font-size: 30px;
        vertical-align: middle;
      }
    }
    .ball {
      position: fixed;
      right: 3%;
      bottom: 15%;
      width: 90px;
      height: 90px;
      padding: 20px 0;
      color: #fff;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      border-radius: 50%;
      opacity: 0.9;
      box-shadow: 0px 5px 20px 5px rgba(181, 192, 252, 0.5);
      border: solid 3px #fff;
      background-image: -moz-linear-gradient(to bottom, #748cfe, #5d78fc);
      background-image: -webkit-linear-gradient(to bottom, #748cfe, #5d78fc);
      background-image: -ms-linear-gradient(to bottom, #748cfe, #5d78fc);
      background-image: linear-gradient(to bottom, #748cfe, #5d78fc);
      z-index: 99;
      .number {
        font-size: 34px;
        margin-bottom: 5px;
      }
    }
  }
  /deep/.table {
    border-radius: 20px;
    .cell {
      font-size: 16px;
    }
    .el-dialog__title {
      font-family: "黑体";
      font-size: 28px;
      color: #5673ff;
    }
    .el-dialog__header {
      padding: 30px 0 20px;
    }
    .dialog-footer {
      text-align: center;
    }
    .el-button {
      margin-right: 20px;
      &:last-child {
        margin-right: 0;
      }
    }
    .el-table {
      margin-bottom: 30px;
    }
    .el-dialog__body {
      padding-top: 0 !important;
    }
  }
  /deep/.filePreview {
    height: 100%;
    i {
      font-size: 20px;
    }
    .mask {
      position: absolute;
      width: 180px;
      height: 56px;
      right: 1.5%;
      background-color: #323639;
    }
    .el-dialog__header {
      padding: 0.25rem 0.25rem 0.125rem;
    }
    .el-dialog__body {
      padding-top: 0 !important;
      height: 90%;
      video {
        width: 100%;
        height: 100%;
      }
    }
    .el-icon-rank {
      position: absolute;
      right: 3%;
      top: 0.27rem;
      font-size: 16px !important;
      color: #909399;
    }
  }
}
</style>